<template>
  <a-form-item v-if="item.view=='date'" :label="item.label">
    <template v-if="single_mode===item.mode">
      <j-date :placeholder=" '请选择'+item.label " v-model="queryParam[item.field]"></j-date>
    </template>
    <template v-else>
      <j-date placeholder="开始日期" v-model="queryParam[item.field+'_begin']" style="width:calc(50% - 15px);"></j-date>
      <span class="group-query-strig">~</span>
      <j-date placeholder="结束日期" v-model="queryParam[item.field+'_end']" style="width:calc(50% - 15px);"></j-date>
    </template>
  </a-form-item>

  <a-form-item v-else-if="item.view=='datetime'" :label="item.label">
    <template v-if="single_mode===item.mode">
      <j-date :placeholder=" '请选择'+item.label " :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" v-model="queryParam[item.field]"></j-date>
    </template>
    <template v-else>
      <j-date placeholder="选择开始时间" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" v-model="queryParam[item.field+'_begin']" style="width:calc(50% - 9px);min-width: 60px;"></j-date>
      <span class="group-query-strig" style="width: auto;padding: 0 4px;">~</span>
      <j-date placeholder="选择结束时间" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" v-model="queryParam[item.field+'_end']" style="width:calc(50% - 9px);min-width: 60px;"></j-date>
    </template>
  </a-form-item>

  <a-form-item v-else-if="item.view=='time'" :label="item.label">
    <template v-if="single_mode===item.mode">
      <j-time :placeholder=" '请选择'+item.label " date-format="HH:mm:ss" v-model="queryParam[item.field]"></j-time>
    </template>
    <template v-else>
      <j-time placeholder="请选择开始时间" date-format="HH:mm:ss" v-model="queryParam[item.field+'_begin']" style="width:calc(50% - 15px);"></j-time>
      <span class="group-query-strig">~</span>
      <j-time placeholder="请选择结束时间" date-format="HH:mm:ss" v-model="queryParam[item.field+'_end']" style="width:calc(50% - 15px);"></j-time>
    </template>
  </a-form-item>

  <a-form-item v-else-if=" item.view=='list' || item.view=='radio' || item.view=='switch'" :label="item.label">
    <j-dict-select-tag
      v-if="item.config==='1'"
      :placeholder=" '请选择'+item.label "
      v-model="queryParam[item.field]"
      :dictCode="getDictCode(item)">
    </j-dict-select-tag>
    <a-select v-else :placeholder=" '请选择'+item.label " v-model="queryParam[item.field]">
      <a-select-option
        v-for="(op,opIndex) in dictOptions[item.dbField || item.field]"
        :key="opIndex"
        :value="op.value">
        {{ op.text }}
      </a-select-option>
    </a-select>
  </a-form-item>

  <a-form-item v-else-if=" item.view=='sel_tree' " :label="item.label">
    <j-tree-select
      :placeholder=" '请选择'+item.label "
      v-model="queryParam[item.field]"
      :dict="item.dict"
      :pidField="item.pidField"
      :pidValue="item.pidValue"
      :hasChildField="item.hasChildField"
      load-triggle-change>
    </j-tree-select>
  </a-form-item>

  <a-form-item v-else-if=" item.view=='cat_tree' " :label="item.label">
    <j-category-select :pcode="item.pcode" v-model="queryParam[item.field]" :placeholder=" '请选择'+item.label "/>
  </a-form-item>

  <a-form-item v-else-if=" item.view=='sel_search' " :label="item.label">
    <j-search-select-tag
      v-if="item.config==='1'"
      v-model="queryParam[item.field]"
      :placeholder=" '请选择'+item.label "
      :dict="getDictCode(item)">
    </j-search-select-tag>
    <j-online-search-select
      v-else
      :ref="item.field+'_search'"
      v-model="queryParam[item.field]"
      :placeholder=" '请选择'+item.label "
      :dict="true"
      :sql="getSqlByDictCode(item)">
    </j-online-search-select>

  </a-form-item>

  <a-form-item v-else-if="item.view === 'search'" :label="item.label">
    <j-online-search-select
        :ref="item.field+'_search'"
        v-model="queryParam[item.field]"
        :placeholder="'请选择'+item.label"
        :sql="item.sql">
    </j-online-search-select>
  </a-form-item>

  <a-form-item v-else-if=" item.view=='sel_user' " :label="item.label">
    <j-select-user-by-dep v-model="queryParam[item.field]" v-bind="extendParam" :placeholder=" '请选择'+item.label " trigger-change></j-select-user-by-dep>
  </a-form-item>

  <a-form-item v-else-if=" item.view=='sel_depart' " :label="item.label">
    <j-select-depart v-model="queryParam[item.field]" v-bind="extendParam" :placeholder=" '请选择'+item.label " :trigger-change="true"/>
  </a-form-item>

  <a-form-item v-else-if=" item.view=='popup' " :label="item.label">
    <j-popup
      :placeholder=" '请选择'+item.label "
      v-model="queryParam[item.field]"
      :code="item.dictTable"
      :org-fields="item.dictCode"
      :dest-fields="item.dictText"
      :field="getPopupField(item.dictText)"
      :multi="true"/>
  </a-form-item>

  <a-form-item v-else-if=" item.view=='pca' " :label="item.label">
    <j-area-linkage :placeholder=" '请选择'+item.label " v-model="queryParam[item.field]" type="cascader"/>
  </a-form-item>

  <a-form-item v-else-if=" item.view=='checkbox' || item.view=='list_multi'" :label="item.label">
    <j-select-multiple
      v-if="item.config==='1'"
      :placeholder=" '请选择'+item.label "
      v-model="queryParam[item.field]"
      :dictCode="getDictCode(item)">
    </j-select-multiple>
    <j-select-multiple
      v-else
      :placeholder=" '请选择'+item.label "
      :options="dictOptions[item.dbField]"
      v-model="queryParam[item.field]">
    </j-select-multiple>
  </a-form-item>

  <a-form-item v-else :label="item.label">
    <template v-if="single_mode===item.mode">
      <a-input :placeholder=" '请输入'+item.label " v-model="queryParam[item.field]"></a-input>
    </template>
    <template v-else>
      <a-input :placeholder=" '请输入开始'+item.label " v-model="queryParam[item.field+'_begin']" style="width:calc(50% - 15px);"></a-input>
      <span class="group-query-strig">~</span>
      <a-input :placeholder=" '请输入结束'+item.label " v-model="queryParam[item.field+'_end']" style="width:calc(50% - 15px);"></a-input>
    </template>
  </a-form-item>

</template>

<script>
import JOnlineSearchSelect from '@/components/online/autoform/comp/JOnlineSearchSelect'

  export default {
    name: 'OnlineQueryFormItem',
    components: { JOnlineSearchSelect },
    props:{
      item:{
        type:Object,
        default:()=>{},
        required:true
      },
      dictOptions:{
        type:Object,
        default:()=>{},
        required:true
      },
      queryParam:{
        type:Object,
        default:()=>{},
        required:true
      }
    },
    data(){
      return {
        single_mode:"single",
        extendParam:{}
      }
    },
  //update-begin-author:taoyan date:20211227 for:JTC-222【online-查询】 ①用户、部门组件配置扩展参数 store ，查询条件取值没有获取store的配置的字段值②用户组件配置multiSelect无效
    watch:{
        item:{
          deep:true,
          immediate:true,
          handler(val){
            this.extendParam = {}
            if(val && val.fieldExtendJson){
              let temp = JSON.parse(val.fieldExtendJson)
              if(temp){
                if(temp.store){
                  this.extendParam['store'] = temp.store
                }
                if(temp.text){
                  this.extendParam['text'] = temp.text
                }
                if(temp.multiSelect===false){
                  this.extendParam['multi'] = false
                }else{
                  this.extendParam['multi'] = true
                }
              }
            }
          }
        }
    },
  //update-end-author:taoyan date:20211227 for:JTC-222【online-查询】 ①用户、部门组件配置扩展参数 store ，查询条件取值没有获取store的配置的字段值②用户组件配置multiSelect无效
    methods:{
      getDictCode(item){
        console.log('item',item)
        if(item.dictTable && item.dictTable.length>0){
          return item.dictTable+','+item.dictText+','+item.dictCode
        }else{
          return item.dictCode
        }
      },
      getPopupField(fields){
        return fields.split(',')[0]
      },
      getSqlByDictCode(item){
        let { dictTable, dictCode, dictText } = item
        let temp = dictTable.toLowerCase();
        let arr = temp.split('where')
        let condition = ''
        //update-begin-author:taoyan date:20220118 for:JTC-59 【online表单】下拉搜索组件的sql，是在前端拼的不安全
        let sql = arr[0]+','+dictText+','+dictCode
        if(arr.length>1){
          sql+=','+arr[1]
        }
        //update-end-author:taoyan date:20220118 for:JTC-59 【online表单】下拉搜索组件的sql，是在前端拼的不安全
        console.log('sql', sql)
        return sql;
      }
    }

  }
</script>

<style scoped>
  .group-query-strig{
    width:30px;text-align: center;display: inline-block;
  }
</style>